<template>
  <div class="gobang">
    <!-- 开始界面 -->
    <StartInterface :socket="socket" v-if="!isShow" @isShow="sORj"></StartInterface>
    <!-- 棋盘以及背景 -->
    <gobangGgd v-if="isShow"></gobangGgd>
    <!-- 棋盘的事件以及棋子 -->
    <gobangQp :socket="socket" v-if="isShow"></gobangQp>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import gobangGgd from './gobangBgd/index.vue'
import gobangQp from './gobangQp/index.vue'
import createWebSocket from './ts/websocket'
import StartInterface from './StartInterface/index.vue'

const socket = ref<WebSocket>(createWebSocket(getCurrentInstance()?.appContext.app.config.globalProperties.$sORj))
const isShow = ref<boolean>(false)
//加入或创建游戏成功
const sORj = (value: any) => {
  isShow.value = true


}


</script> 
<style scoped lang="scss">
.gobang {
  width: 620px;
  height: 620px;
  margin: auto;
  position: relative;

}
</style>